<template>
	<!-- 未登录之后弹窗 -->
	<u-overlay :show="systemConfig.index_popup_notlogin_status == 1 && !isLogin && show" :zIndex="999991" @touchmove.stop.prevent="moveHandle">
		<view class="container u-flex-column u-col-center u-flex-center">
			<view class="main" @click="jump">
				<u-image :src="systemConfig.index_popup_notlogin_img || ''" :showMenuByLongpress="false" width="100%" height="660rpx"
					radius="12rpx"></u-image>
			</view>
			<view class="icon u-flex-center u-col-center" @click="close">
				<image :src="$getImageUrl('/user_client/static/icons/close.svg')" class="icon-img"></image>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				show: true
			}
		},
		computed: {
			...mapState({
				systemConfig: state => state.init.systemConfig,
				isLogin: state => state.user.isLogin
			}),
		},
		methods: {
			close() {
				this.show = false
				this.$emit('close')
			},
			// 跳转
			jump() {
				const url = this.systemConfig.index_popup_notlogin_url
				if (url.includes('/pages')) {
					this.$switchTab(url)
				} else {
					this.$navigateTo(url)
				}
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;

		.main {
			width: 440rpx;
			height: 660rpx;
			border-radius: 40rpx;
		}

		.icon {
			margin-top: 60rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;

			.icon-img {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}
	}
</style>